<template>
  <div>
    <!-- 头部 -->
    <router-link to="/hotel">
      <van-nav-bar left-arrow />
    </router-link>
    <!-- 搜索框 -->
    <van-search placeholder="搜索目的地/酒店" fixed />
    <!-- 国内国际 -->

    <van-tabs v-model="activeName">
      <van-index-bar :sticky="false" highlight-color="#ffba33">
        <!-- 国内开始 -->
        <van-tab title="国内" name="guonei">
          <!-- 数据库替换 -->
          <van-index-anchor :index="name" v-for="(item, name) in cities" :key="name">
            <b @click="btn_user($event)" :data-id="item.id">
              {{
              item.guonei
              }}
            </b>
          </van-index-anchor>
          <!-- 数据库替换 -->
        </van-tab>
        <!-- 国内结束 -->

        <!-- 国外开始 -->

        <van-tab title="国外" name="guowai">
          <!-- 数据库替换 -->
          <van-index-anchor v-for="(item, index) in cities" :key="index">
            <b @click="btn_user($event)">
              <span>{{ item.guowai }}</span>
            </b>
          </van-index-anchor>
          <!-- 数据库替换 -->
        </van-tab>
        <!-- 国外结束 -->
      </van-index-bar>
    </van-tabs>
  </div>
</template>

<script>
import { IndexBar, IndexAnchor } from "vant";
import { Tab, Tabs } from "vant";
export default {
  components: {
    IndexBar,
    IndexAnchor,
    Tab,
    Tabs,
  },
  data() {
    return {
      activeName: "guonei",
      cities: [],
    };
  },
  methods: {
    // 点击跳转
    btn_user(e) {
      this.$router.push({ path: "/hotel", query: { id: e.target.dataset.id } });
      // console.log(e.target.dataset);
      this.$store.commit("setSite", e.target.innerHTML);
    },
  },
  mounted() {
    this.$axios("/location").then((res) => {
      this.cities = res.data.result;
    });
  },
};
</script>

<style scoped>
.van-nav-bar {
  width: 10%;
}
.van-search {
  width: 90%;
  position: absolute;
  right: 0;
  top: 0;
}
.van-index-bar__index {
  padding: 4px;
}
.van-index-anchor {
  width: 80%;
  line-height: 40px;
}
</style>
